<template>
  <div class="app-container">
    <div>
      <!-- 条件栏 -->
      <div class="filter-wrapper">
        <NewPageFilter
          v-model:query="filterInfo.query"
          :filter-list="filterInfo.list"
          :filter-btn="filterInfo.btn"
        >
          <template v-slot:filter-operateTime>
            <el-date-picker
              v-model="operateTime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="datetimerange"
              range-separator="至"
              align="right"
              start-placeholder="操作时间开始日期"
              end-placeholder="操作时间结束日期"
              :clearable="false"
              @change="timeChange"
            ></el-date-picker>
          </template>
        </NewPageFilter>
      </div>
      <div class="filter-wrapper">
        <NewPageFilter :filter-btn="filterInfo.btnList"></NewPageFilter>
      </div>
      <!-- 表格 -->
      <TableContainer
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        :query="filterInfo.query"
        :tab-index="false"
        :field-list="tableInfo.fieldList"
        :pager="true"
        :checkBox="false"
        :spanMethod="spanMethod"
      >
        <template v-slot:col-exceptActualBrandRate="scope">{{
          scope.row.exceptActualBrandRate
            ? scope.row.exceptActualBrandRate + '%'
            : '-'
        }}</template>
        <template v-slot:col-exceptActualHospitalRate="scope">{{
          scope.row.exceptActualHospitalRate
            ? scope.row.exceptActualHospitalRate + '%'
            : '-'
        }}</template>
      </TableContainer>
      <PageDialog
        v-show="dialogInfo.visible"
        :title="dialogInfo.title"
        v-model:visible="dialogInfo.visible"
        :width="dialogInfo.width"
        :bt-loading="dialogInfo.btLoading"
        :bt-list="dialogInfo.btList"
      >
        <div class="asset-msg">
          <div class="asset-msg-label">
            <i class="el-icon-warning"></i>{{ dialogInfo.msg }}：
          </div>
          <el-radio-group v-model="dialogInfo.flag">
            <el-radio label="page">当前页数据</el-radio>
            <el-radio label="all">全部页数据</el-radio>
          </el-radio-group>
        </div>
      </PageDialog>
    </div>
  </div>
</template>

<script setup name="cmPreStats">
import { getProductPage, exportProductSumDataQuery } from '@/api/cmPreMgt'
import { getDeptAll } from '@/api/core'
import moment from 'moment'

const { proxy } = getCurrentInstance()

const operateTime = ref([
  moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format(
    'YYYY-MM-DD'
  ),
  moment(new Date()).format('YYYY-MM-DD'),
])
// 过滤相关配置
const filterInfo = ref({
  query: {
    startDate: operateTime.value[0],
    endDate: operateTime.value[1],
    tsSystemCode: 'LIS',
  },
  copyQuery: {},
  list: [
    {
      slot: true,
      label: '起止日期',
      value: 'operateTime',
      event: search,
    },
    {
      componentType: 'select-model',
      label: '对接系统',
      value: 'tsSystemCode',
      event: search,
      code: 'client_id',
    },
    {
      label: '使用部门',
      value: 'deptIdMult',
      query: {
        deptAuth: 'id',
        status: 1,
      },
      api: getDeptAll,
      componentType: 'slip-select',
      multiple: true,
      event: search,
    },
    {
      componentType: 'input',
      label: '产品编码/产品名称',
      value: 'keyword',
      event: search,
    },
    {
      componentType: 'input',
      label: '项目编码',
      value: 'tsProjectCodeLike',
      event: search,
    },
    {
      componentType: 'input',
      label: '项目名称',
      value: 'tsProjectNameLike',
      event: search,
    },
    {
      componentType: 'input',
      label: '厂家',
      value: 'brandNameLike',
      event: search,
    },
    {
      componentType: 'input',
      label: '规格',
      value: 'standardLike',
      event: search,
    },
  ],
  btn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
  btnList: [
    // {
    //   type: 'button',
    //   label: '导出excel',
    //   event: exportExcel,
    //   show: proxy.$permission('cmPreStats:exportExcel'),
    // },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: getProductPage,
  data: [],
  selections: [],
  fieldList: [
    { label: '序号', value: 'index', width: 40 },
    { label: '品种类型', value: 'varietiesTypeValue' },
    { label: '品种名称', value: 'varietiesName' },
    { label: '产品编码', value: 'productCode' },
    { label: '产品名称', value: 'productName' },
    { label: '厂家', value: 'brandName' },
    { label: '规格', value: 'standard' },
    { label: '厂家理论测试数', value: 'expectedUsageTimes' },
    { label: '院内理论测试数', value: 'hospitalExpectedUsageTimes' },
    { label: '期间出库总数', value: 'exportQty' },
    { label: '期间出库总金额', value: 'exportSumAmount' },
    { label: '期间出库厂家理论测试数', value: 'productExpectedUsageTimes' },
    { label: '期间出库厂家理论测试总数', value: 'sumExpectedUsageTimes' },
    {
      label: '期间出库院内理论测试数',
      value: 'productHospitalExpectedUsageTimes',
    },
    {
      label: '期间出库院内理论测试总数',
      value: 'sumHospitalExpectedUsageTimes',
    },
    { label: '使用部门', value: 'deptName' },
    { label: '设备编码', value: 'tsDeviceCode' },
    { label: '设备名称', value: 'tsDeviceName' },
    { label: '设备型号', value: 'tsStandard' },
    { label: '设备厂家', value: 'tsFactory' },
    { label: '项目编码', value: 'tsProjectCode' },
    { label: '项目名称', value: 'tsProjectName' },
    { label: '项目实际测试数', value: 'projectTimes' },
    { label: '项目实际测试总数', value: 'sumProjectTimes' },
    { label: '实际与厂家理论比', value: 'exceptActualBrandRate', type: 'slot' },
    {
      label: '实际与院内理论比',
      value: 'exceptActualHospitalRate',
      type: 'slot',
    },
  ],
})
const dialogInfo = ref({
  visible: false,
  title: '提示',
  btLoading: false,
  type: '',
  msg: '',
  width: '400px',
  flag: 'page',
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '导出',
      type: 'primary',
      event: checkConfirm,
      show: true,
    },
  ],
})

onMounted(() => {
  filterInfo.value.copyQuery = proxy.$fn.deepClone(filterInfo.value.query)
})

function timeChange(val) {
  if (val && val.length) {
    filterInfo.value.query.startDate = val[0]
    filterInfo.value.query.endDate = val[1]
  } else {
    filterInfo.value.query.startDate = ''
    filterInfo.value.query.endDate = ''
  }
  search()
}
function spanMethod({ row, column, rowIndex, columnIndex }) {
  const afterIndexs = [12, 14, 23, 24, 25]
  const afterIndexs2 = [15, 16, 17, 18, 19, 20, 21, 22]
  let keys = new Array(25)
  keys[0] = 'index'
  if (afterIndexs.includes(columnIndex)) {
    keys[columnIndex] = 'index'
  } else if (afterIndexs2.includes(columnIndex)) {
    keys = [
      'index',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      'deptName',
      'tsDeviceCode',
      'tsDeviceName',
      'tsStandard',
      'tsFactory',
      'tsProjectCode',
      'tsProjectName',
      'projectTimes',
    ]
  } else {
    keys = [
      'index',
      'varietiesTypeValue',
      'varietiesName',
      'productCode',
      'productName',
      'brandName',
      'standard',
      'expectedUsageTimes',
      'hospitalExpectedUsageTimes',
      'exportQty',
      'exportSumAmount',
      'productExpectedUsageTimes',
      '',
      'productHospitalExpectedUsageTimes',
    ]
  }
  // 注意:字段列表要按表格排列的顺序排列,如果后续字段不再需要进行行合并,可以省略后面的字段,如果中间某字段要跳过合并,要用空字符串顶位
  return proxy.$fn.spanMethod(tableInfo.value.data, keys, rowIndex, columnIndex)
}
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
function clearSearch() {
  filterInfo.value.query = proxy.$fn.deepClone(filterInfo.value.copyQuery)
  search()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function handleClose() {
  dialogInfo.value.visible = false
}
function checkConfirm() {
  exportExcelList()
  dialogInfo.value.visible = false
  dialogInfo.value.msg = ''
}
function exportExcel() {
  dialogInfo.value.visible = true
  dialogInfo.value.type = 'excel'
  dialogInfo.value.msg = '请选择数据导出范围'
  dialogInfo.value.btList[1].label = '导出'
  dialogInfo.value.flag = 'page'
}
function exportExcelList() {
  let params = {
    ...filterInfo.value.query,
    ...page.value,
    isPagerByExport: dialogInfo.value.flag === 'page' ? true : false,
  }
  exportProductSumDataQuery(params).then((res) => {
    if (res) {
      proxy.$fn.parseExcel(res)
    }
  })
}
</script>

<style lang="scss" scoped></style>
